<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="140px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="12">
					<el-form-item label="队伍名称" prop="dwmc" >
						<el-input v-model="dataForm.dwmc" placeholder="请输入队伍名称" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="应急队伍成立时间" prop="clsj" >
						<el-date-picker v-model="dataForm.clsj" placeholder="请选择应急队伍成立时间" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="负责人手机" prop="fzrsj" >
						<el-input v-model="dataForm.fzrsj" placeholder="请输入负责人手机" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="固定电话" prop="gddh" >
						<el-input v-model="dataForm.gddh" placeholder="请输入固定电话" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属单位/部门" prop="ssbm" >
						<el-select filterable v-model="dataForm.ssbm" @change="person" placeholder="请选择所属单位/部门" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ssbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="队伍负责人" prop="dwfzr" >
						<!-- <el-input v-model="dataForm.dwfzr" placeholder="请输入队伍负责人" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input> -->
						<el-select multiple v-model="dataForm.dwfzr" placeholder="请选择" clearable :style='{"width":"100%"}' filterable>
							<el-option v-for="(item, index) in personAll" :key="index" :label="item.realName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="相关附件" prop="xgfj" >
						<JNPF-UploadFz v-model="xgfjList" accept="" :fileSize="2" sizeUnit="MB" :limit="9" buttonText="点击上传" >
						</JNPF-UploadFz>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="队伍职责描述" prop="dwms" >
						<el-input v-model="dataForm.dwms" placeholder="请输入队伍职责描述" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>

				              
		<h4 class="my_title">应急队伍人员信息</h4>
         <template>
             <el-table :data="dataForm.yjdwryxx">
              <el-table-column type="index" width="50" label="序号" align="center" />
              <el-table-column prop="rymc" label="人员名称" />
              <el-table-column prop="yjdwzz" label="应急队伍职务" />

			  <el-table-column label="所属部门"  prop="ssbm" />
			  <el-table-column label="联系方式"  prop="lxfs" />
                         
              <el-table-column label="操作" width="50" >
                <template slot-scope="scope">
                  <el-button size="mini" type="text" class="JNPF-table-delBtn"
                    @click="handleDel(scope.$index,scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-actions" @click="choice" >
              <el-button type="text" icon="el-icon-plus">新增</el-button>
            </div>

		 </template>

		 <GoodsBox v-if="goodsBoxVisible" ref="goodsBox" @refreshDataList="initList" />
                

			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
import GoodsBox from './Defend'
import {departmentPerson}from '@/api/systemIntegration/recard'

export default {
	components: { GoodsBox},
    data() {
      return {
				personAll:[], // 队伍负责人
        visible: false,
        isDetail: false,
		goodsBoxVisible: false,
        dataForm: {
					dwmc:undefined,
					dwfzr:undefined,
					fzrsj:undefined,
					gddh:undefined,
					ssbm:undefined,
					clsj:undefined,
					xgfj:undefined,
					dwms:undefined,
					yjdwryxx : [],
        },
        rules: {
						dwmc:[
						{
							required:true,
							message:'请输入队伍名称',
							trigger:'blur'
						},
						],
						dwfzr:[
						{
							required:true,
							message:'请输入队伍负责人',
							trigger:'blur'
						},
						],
						fzrsj:[
						{
							required:true,
							message:'请输入负责人手机',
							trigger:'blur'
						},
						],
						gddh:[
						{
							required:true,
							message:'请输入固定电话',
							trigger:'blur'
						},
						],
						ssbm:[
						{
							required:true,
							message:'请输入所属单位/部门',
							trigger:'blur'
						},
						],
						clsj:[
						{
							required:true,
							message:'请输入应急队伍成立时间',
							trigger:'blur'
						},
						],

        },
				ssbmOptions:[],

					xgfjList:[],

      }
    },
    created() {
		this.getSsbmOptions();

    },
    methods: {
	  choice() {
		this.goodsBoxVisible = true
		this.$nextTick(() => {
			this.$refs.goodsBox.init()
		 })
	  },

	  handleDel(index, row) {
         this.dataForm.yjdwryxx.splice(index, 1);
      },

	  initList(list) {
	  this.dataForm.yjdwryxx=[];
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
		let item = {
				id: e.id,
				rymc: e.realName,
				yjdwzz: e.position,
				ssbm: e.department,
				lxfs: e.mobilePhone,
			};
    
        this.dataForm.yjdwryxx.push(item)
      }
    },

		getSsbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.ssbmOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {
				this.dataForm.yjdwryxx =[];

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/YJDWGLXX/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.xgfjList = this.dataForm.xgfj ? JSON.parse(this.dataForm.xgfj) : [];

            })
          }
        })
      },
			// 申请人
			async person(id) {
				this.dataForm.dwfzr = ''
				const {data} = await departmentPerson({organizeId:id})
				this.personAll = data.list
			},
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
				this.$set(this.dataForm, 'xgfj', JSON.stringify(this.xgfjList));

            if (!this.dataForm.id) {
              request({
                url: '/api/System/YJDWGLXX',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/YJDWGLXX/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },
			addHandleyjdwryxxEntityList() {
				let item = {
					rymc: undefined,
					yjdwzz: undefined,
					ssbm: undefined,
					lxfs: undefined,
				}
				this.dataForm.yjdwryxx.push(item)
			},
			handleDelyjdwryxxEntityList(index) {
				this.dataForm.yjdwryxx.splice(index, 1);
			},

    }
  }
  </script>

  <style scoped>
       .my_title{
		   width: 100%;
		   height: 50px;
		   font-size: 16px;
           line-height: 50px;
           font-weight: 500;
		   color: #606266;
		   float: left;
	   }
  </style>